<!--
 * @Descripttion:商品业绩-商品版
 * @Author: caijj
 * @Date: 2020-12-03 15:14:54
 * @LastEditors: caijj
 * @LastEditTime: 2021-03-18 15:14:17
-->
<template>
  <BasicLayout>
    <template #wrapper>
      <search-form
        :is-store="false"
        :exporting="exporting"
        :report-type="formData.reportType"
        :shor-cur="shorCur"
        @submit="onSearchTable"
        @export="onHandleExport"
      />
      <!-- <tree-table
        :loading="loading"
        :columns="columns"
        :table-data="tableData"
        border
      /> -->
      <table-pagination
        :key="1"
        :loading="loading"
        :columns="columns"
        :data="tableData"
        :show-summary="showSummary"
        :summary-method="getSummaries"
        :is-multi-col="true"
        :total="total"
        :current-page="pageNo"
        :page-size="pageSize"
        :page-sizes="pageSizes"
        border
        @handlePaginationChange="onPaginationChange"
      />
    </template>
  </BasicLayout>
</template>
<script>
import SearchForm from '@/components/business/SearchForm';
// import TreeTable from '@/components/common/TreeTable';
import TablePagination from '@/components/common/TablePagination';
import { getCommodityPerformanceReport as getPerformanceReport } from '@/api/commonApi';
import exportReportMixin from '@/components/mixins/ExportReport';
import Columns from '@/utils/columns-config/common';

export default {
  name: 'KAliveCommodityCommercialEdition',
  components: {
    SearchForm,
    // TreeTable,
    TablePagination
  },
  mixins: [exportReportMixin],
  data() {
    const key = ['customer-unit-price', 'number-of-customers'];
    const columns = Columns.filter((item) => !key.includes(item.key));
    columns.splice(0, 1, { prop: 'rowLabel', key: 'rowLabel', label: '商品名称', width: '250px', align: 'left', tooltip: true });
    columns.splice(1, 0, { prop: 'businessId', key: 'businessId', label: '商品代码', width: '150px' });
    return {
      shorCur: {
        '昨天': [this.moment().add(-1, 'd'), this.moment().add(-1, 'd')],
        '近7天': [this.moment().add(-7, 'd'), this.moment().add(-1, 'd')],
        '月至今': [this.moment().startOf('month'), this.moment().add(-1, 'd')],
        '近14天': [this.moment().add(-14, 'd'), this.moment().add(-1, 'd')],
        '近30天': [this.moment().add(-30, 'd'), this.moment().add(-1, 'd')],
        '年至今': [this.moment().startOf('year'), this.moment().add(-1, 'd')],
        '近12月': [this.moment().month(this.moment().month() - 1).add(-11, 'month').startOf('month'), this.moment().month(this.moment().month() - 1).endOf('month')]
      },
      columns,
      tableData: [],
      loading: false,
      total: 0,
      pageNo: 1,
      pageSize: 100,
      pageSizes: [10, 20, 50, 100],
      formData: {
        queryMode: 'COMMODITY',
        reportType: 'COMMODITY'
      },
      summaries: null,
      showSummary: false
    };
  },
  methods: {
    onHandleExport(val) {
      console.log('val:', val);
      delete this.formData.pageSize;
      delete this.formData.pageNo;
      this.onExportReport('performance', val);
    },
    onSearchTable(form) {
      this.onSearchReport(form);
      this.onSearchSummaries(form);
    },
    /* 分页查询 */
    onPaginationChange({ current, size }) {
      if (!this.summaries) {
        this.onSearchSummaries(this.formData);
      }
      this.onSearchReport({
        ...this.formData,
        pageSize: size,
        pageNo: current
      });
    },
    // 查询列表
    onSearchReport(form) {
      this.loading = true;
      this.tableData = [];
      this.$nextTick(() => {
        this.formData = {
          ...this.formData,
          ...form,
          queryMode: 'COMMODITY'
        };
        getPerformanceReport({ pageSize: 100, pageNo: 1, ...this.formData }).then(({ data, current, total, pages, resultCode }) => {
          if (resultCode === '0000') {
            data.forEach(item => {
              item.uuid = item.businessId + item.queryMode + new Date().getTime();
            });
            this.pageNo = current;
            this.total = total;
            this.pageSize = pages;
            this.tableData = data;
            this.loading = false;
          }
        }).catch(() => {
          this.loading = false;
        });
      });
    },
    // 汇总查询
    onSearchSummaries(form) {
      getPerformanceReport({
        queryMode: 'COMMODITY',
        reportType: 'COMMODITY',
        summary: true,
        ...form
      }).then(({ data, resultCode }) => {
        if (resultCode === '0000') {
          this.showSummary = true;
          this.summaries = data[0];
          this.handleColums(this.columns);
        }
      }).catch(() => {
        this.showSummary = false;
      });
    },
    // 处理汇总栏显示
    handleColums(arr) {
      arr.forEach((i) => {
        if (this.summaries[i.key] >= 0 && i.markStyle) {
          i.className = 'standard';
        } else if (this.summaries[i.key] < 0 && i.markStyle) {
          i.className = 'unstandard';
        }
        if (i.toPercent && this.summaries[i.key]) {
          this.summaries[i.key] += '%';
        }
        if (i.children && i.children.length > 0) {
          this.handleColums(i.children);
        }
      });
    },
    // 获取汇总数据映射
    getSummaries(params) {
      const { columns } = params;
      const sums = [];
      columns.forEach((column, index) => {
        const { property } = column;
        if (index === 0) {
          sums[index] = '汇总';
          return;
        }
        sums[index] = this.summaries[property] || '-';
      });
      return sums;
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-table__footer {
  .standard {
    color: #67c23a;
  }
  .unstandard {
    color: #f56c6c;
  }
}
</style>
